<template>
  <div class="updata_pw">
    <div class="ctx">
      <div class="img">
        <log-img class="log-img" />
      </div>
      <div class="log-ctx">
        <div class="form">
          <div class="label">
            <ul>
              <li v-for="data in label" :key="data.index">
                <span>{{ data.name }}</span>
              </li>
            </ul>
          </div>
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
            @submit.native.prevent
          >
            <el-form-item prop="email">
              <el-input v-model="ruleForm.email" autocomplete="off" placeholder="请输入要修改密码的邮箱"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                placeholder="请输入原密码"
                type="password"
                v-model="ruleForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item prop="newPassword">
              <el-input
                placeholder="请输入新密码"
                type="password"
                v-model="ruleForm.newPassword"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item prop="checkPassword">
              <el-input
                placeholder="请再次输入新密码"
                type="password"
                v-model="ruleForm.checkPassword"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" native-type="submit" @click="submitForm('ruleForm')">修改</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="router-link">
            <router-link to="log_in">登录</router-link>
            <router-link to="register">注册</router-link>
            <router-link to="find_pw">忘记密码</router-link>
          </div>
        </div>
      </div>
    </div>
    <footnote />
  </div>
</template>

<script>
import { userUrl } from "@/public/uri.js";
import logImg from "@/views/users/log/log_img.vue";
export default {
  name: "updata-pw",
  components: {
    "log-img": logImg
  },
  data() {
    let checknewPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error("原密码不能为空"));
      } else {
        if (value.length < 3) {
          callback(new Error("原密码长度不能小于3位"));
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else if (this.ruleForm.password === value) {
        callback(new Error("原密码不能和新密码一致！"));
      } else {
        if (value.length < 3) {
          callback(new Error("新密码长度不能小于3位"));
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.ruleForm.newPassword) {
        callback(new Error("两次输入的新密码不一致!"));
      } else {
        callback();
      }
    };
    let emailPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱"));
      } else {
        let pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if (pattern.test(value)) {
          callback();
        } else {
          callback(new Error("邮箱格式错误"));
        }
      }
    };
    return {
      label: [
        {
          name: "修改密码",
          index: 0
        }
      ],
      ruleForm: {
        password: "",
        checkPassword: "",
        email: "",
        newPassword: ""
      },
      rules: {
        password: [{ validator: checknewPassword, trigger: "blur" }],
        checkPassword: [{ validator: validatePass2, trigger: "blur" }],
        newPassword: [{ validator: validatePass, trigger: "blur" }],
        email: [{ validator: emailPass, trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = new FormData();
          data.append("email", this.ruleForm.email);
          data.append("password", this.ruleForm.password);
          data.append("newPassword", this.ruleForm.newPassword);
          this.$axios
            .post(`${userUrl}/log_operation/update_pw`, data)
            .then(res => {
              if (res.data.ok === 1) {
                this.$message({
                  type: "success",
                  message: res.data.data
                });
                this.resetForm("ruleForm");
                this.$router.push("log_in");
              } else {
                this.$message({
                  type: "warning",
                  message: res.data.data
                });
              }
            })
            .catch(err => {
              this.$message.error("500错误信息：" + err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.updata_pw
  width: 100%
  height: 100%
  .ctx
    width: 1280px
    margin: 0 auto
    height: 80vh
    @include flex(flex-start,flex-start)
    .img
      flex: 0 0 60%
      height: 100%
      @include flex(flex-start,center)
      >.log-img
        width: 85%
        height: 70%
        background-color: #666
    .log-ctx
      flex: 1
      height: 100%
      @include flex(center,center) 
      .form
        width: 100%
        height: 70%
        background-color: #fff
        box-shadow: 0px 0px 10px rgba(0,0,0,.1)     
        .label
          width: 100%
          height: 8%
          >ul
            width: 100%
            height: 100%
            border-bottom: 1px solid #dcdcdc
            @include flex(flex-satrt,center)
            >li
              flex: 1
              height: 100%
              cursor: pointer
              border-right: 1px solid #dcdcdc
              @include flex(center,center)
              &:last-child
                border: none       
        .demo-ruleForm
          width: 100%
          height: 82%
          padding: 0 10%
          @include align(center)
          .el-form-item
            flex: 100%
        .router-link
          width: 100%
          height: 10%
          border-top: 1px solid #dcdcdc
          padding: 0 10%
          @include flex(space-between,center) 
</style>